<template>
  <div class="project-order-wrap">
    <income-list ref="income" :project-id="projectId" :detail-data="detailData" @searchOrder="searchOrder" @getDetail="getDetail" />
    <order-list ref="orderList" :detail-data="detailData" :supplier-name="supplierName" style="margin-bottom: 32px" @getDetail="getDetail" @getIncomeList="getIncomeList" />
  </div>
</template>
<script>
import IncomeList from './incomeList';
import OrderList from './orderList';
export default {
  name: 'ProjectOrder',
  components: {
    IncomeList,
    OrderList
  },
  props: {
    projectId: {
      type: Number,
      default: null
    },
    detailData: {
      type: Object,
      default: () => {
        return null;
      }
    },
    supplierName: {
      type: String,
      default: null
    }
  },
  methods: {
    searchOrder(id) {
      this.$refs.orderList.incomeOderClick(id);
    },
    getDetail() {
      this.$emit('getDetail');
    },
    getIncomeList() {
      this.$refs.income.fetchData();
    }
  }
};
</script>

<style lang="scss" scoped>
.header-box {
  display: flex;
  align-items: center;
}
</style>
